<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            border:1px solid #cdcdcd;
            width:330px;
            padding:0;
            font-size:14px;
        }
        li{
            /*border:1px solid #cdcdcd;*/
            list-style-type: none;
            height:2em;
            padding:0.5em 0;
        }
        li:last-child{
            border-top:1px dotted #cdcdcd;
            margin:0 auto;
            width:97%;
        }
        h4{
            font-size:1.15em;
            line-height:2em;
            margin:0 0 0 1.25em;
        }
        a{
            display:inline-block;
            /*border:1px dotted;*/
            margin-left:1.25em;
            line-height:2em;
        }
        a:link{
            text-decoration:none;color:#333;
        }
        a:hover{
            text-decoration:underline;color:#ff3fff;
        }
        .color1{
            background-color:#efefef;
        }
        .icon1{
            vertical-align:middle;
            display: inline-block;
            width:18px;height:16px;
            background:url(../images/index_1.png) no-repeat;
        }
        .cafe{
            background-position: -215px -69px;
        }
        .joy{
            background-position:-245px -69px;
        }
        .cloth{
            background-position: -275px -69px;
        }
        .daily{
            background-position: -305px -69px;
        }
        .app{
            width:18px;height:18px;
            background-image: url(../images/index_1.png);
            background-repeat:no-repeat;
            /*border:1px dotted;*/
            vertical-align:middle;
        }
        .andriod{
            background-position:-33px -140px;
        }
        .apple{
            background-position:-57px -140px;
        }
    </style>
</head>
<body>
    <ul>
        <li><h4>商家大全</h4></li>
        <li class="color1">
            <a class="icon1 cafe" href="#"></a>
            <a href="#">中餐馆</a>
            <a href="#">小吃简餐</a>
            <a href="#">火锅海鲜</a>
        </li>
        <li>
            <a class="icon1 joy" href="#"></a>
            <a href="#">电影院</a>
            <a href="#">商务会所</a>
            <a href="#">美容美发</a>
        </li>
        <li class="color1">
            <a class="icon1 cloth" href="#"></a>
            <a href="#">服装配饰</a>
            <a href="#">母婴亲子</a>
            <a href="#">婚庆礼仪</a>
        </li>
        <li>
            <a class="icon1 daily" href="#"></a>
            <a href="#">加油站</a>
            <a href="#">停车场</a>
            <a href="#">日杂便利</a>
        </li>
        <li>
            <a href="#">搜店铺，找优惠！掌上万家：</a>
            <a href="#" class="app andriod"></a>
            <a href="#" class="app apple"></a>
        </li>

    </ul>
</body>
</html>